<template>


    <div style="height:100%;max-height: 100%" ref="reportReviewContainer"></div>


</template>

<script>

    import PropEdit from './ReportPropEdit.vue';

    export default {


        props: ["templateConf", "relations", "reportData", "reportName"],

        data() {
            return {
                inited: false,
                global_chart: "",
                option: {},
            };
        },
        comments: {
            PropEdit
        },
        methods: {
            resize() {

                if (this.global_chart != '') {
                    this.global_chart.resize();
                }
            },
            displayReport() {
                if (this.templateConf.templateOptionJs) {

                    //样式
                    let styleOptions = this.templateConf.templateStyleOptions;

                    //options
                    let optionFunc = eval("(" + this.templateConf.templateOptionJs + ")");

                    if( typeof(styleOptions) == "string"){

                        styleOptions = JSON.parse(styleOptions);
                    }

                    this.option = optionFunc(this.reportName, styleOptions, this.relations, this.reportData);

                    if (!this.inited) {
                        let that = this;
                        this.global_chart = this.$echarts.init(this.$refs.reportReviewContainer);
                        this.inited = true;

                        window.addEventListener("resize", function () {
                            that.global_chart.resize();
                        });
                    }

                    if (this.option) {
                        this.global_chart.clear();
                        this.global_chart.setOption(this.option);
                    }
                }
            }
        },
        watch: {
            reportData(nv, ov) {
                this.displayReport();
            },

            templateConf:{

                handler(){
                    this.displayReport();
                },
                deep:true

            }
        }

    };
</script>

<style>
</style>
